<template>
  <div class="monaco-editor-view">
    <el-row>
      <el-col :span="12">
          <div class="wrapper">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>{{detail.pName}}</span>
                </div>
              </template>
              <div class="text item">{{ '创建时间：' + detail.createTime }}</div>
              <div class="text item">{{ '提交次数：' + detail.submitTimes }}</div>
              <div class="text item">{{ '通过次数：' + detail.acTimes }}</div>
              <div class="text item">{{ '最大耗时：' + detail.limit }}</div>
              <pre class="text item">{{ '题目内容：' + detail.context }}</pre>
            </el-card>
          </div>
      </el-col>
      <el-col :span="12">
        <MonacoEditor v-if="codeValue != '' || !rid" :pid="pid"  :cid="cid" :codeValue="codeValue" :readFlag="readFlag"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MonacoEditor from "@/components/MonacoEditor";
import api from "../api/api.js";

export default {
  name: "ProblemDetail",
  components: {
    MonacoEditor
  },
  data() {
    return {
      detail:
      {
        pName: '',
        createTime: '',
        acTimes: '',
        submitTimes: '',
        limit: '',
        context: ''
      },
      pid: this.$route.query.pid,
      cid: this.$route.query.cid, // 因为提交次数不同,所以这里需要cid
      rid: this.$route.query.rid,
      readFlag: false,
      codeValue: ""
    }
  },
  mounted() {

    if (this.rid) // 代表是展示代码
    {
        api
            .GetStatusCode(this.rid)
            .then((res) => {
                console.log(res.data[0].code);
                this.readFlag = true;
                this.codeValue = res.data[0].code;
            })

    }
    // 从题库页面进入
    if (this.cid == '-1')
    {
      api
          .GetPidProblem( {'pid': this.pid})
          .then((res) => {
            //console.log(res.data);
            var reg = new RegExp("<br>", "g");
            this.detail.pName = res.data[0].pName;
            this.detail.createTime = res.data[0].createTime;
            this.detail.acTimes = res.data[0].acTimes;
            this.detail.submitTimes = res.data[0].submitTimes;
            this.detail.limit = res.data[0].limit;
            this.detail.context = res.data[0].context.replace(reg, "\n");
          })
    }
    else
    {
      // 比赛页面cid submitTimes 和 acTimes 要重新写 针对比赛的提交
      api
          .GetPidProblem( {'pid': this.pid})
          .then((res) => {
            //console.log(res.data);
            var reg = new RegExp("<br>", "g");
            this.detail.pName = res.data[0].pName;
            this.detail.createTime = res.data[0].createTime;
            this.detail.limit = res.data[0].limit;
            this.detail.context = res.data[0].context.replace(reg, "\n");
          })

      api
          .GetCidCompetitionOneProblemDetail({'cid': this.cid, 'pid' : this.pid})
          .then((res) => {
            this.detail.submitTimes = res.data[0].submitTimes;
            this.detail.acTimes = res.data[0].acTimes;
          })
    }
  },
  methods: {

  }
}
</script>

<style scoped>
.wrapper {
  margin: 20px auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 20px;
}

.item {
  margin-bottom: 18px;
}

.card-header {
  font-size: 20px;
}

.text.item {
  overflow-wrap: break-word;
  white-space: pre-wrap;
  font-weight: normal;
}

</style>
